<template>
  <view class="trends">
    <g-steps
      :steps="dataList"
      direction="column"
      key-name="date"
      slot-class=".step-remark"
      :current="
        [3, 7, 8, 9, 11, 14].includes(dataList[dataList.length - 1]?.type)
          ? dataList.length - 1
          : dataList.length < 2
          ? 1
          : dataList.length - 2
      "
    >
      <template v-for="(i, k) in dataList" :key="k" #[i.slot]="{ scope }">
        <view class="step-remark">
          <view class="step-row">
            <view class="step-row-left">
              <view class="ss-flex ss-flex-1">
                <view class="operator">{{ scope.operationUserNickName }}</view>
                <view class="post-tag">{{ enumUserType(scope.operationUserType) }}</view>
              </view>
              <view class="step" :class="{ red: scope.type == 3 }">
                {{ typeLabel(scope) }}
              </view>
            </view>
            <uv-avatar
              :src="webSrc(scope.operationUserAvatar)"
              size="106rpx"
              :customStyle="{ padding: '20rpx 20rpx 20rpx 0' }"
            />
          </view>
          <view class="step-bottom">
            <uv-text
              v-if="[3, 7, 8, 9, 11, 14].includes(scope.type)"
              :text="`${typeLabel(scope)}，共耗时：${getTimeDistance(
                dataList[0]?.createTime,
                scope.createTime
              )}`"
              color="#212121"
              size="24rpx"
              margin="0 0 10rpx 0"
              lines="1"
            />
            <uv-text
              v-if="scope.remark"
              :text="`原因备注：${scope.remark || '无'}`"
              color="#757575"
              size="24rpx"
              margin="10rpx 0"
              lines="1"
            />
            <uv-text :text="scope.createTime" color="#757575" size="24rpx" lines="1" />
          </view>
        </view>
      </template>
    </g-steps>
  </view>
</template>
<script setup>
import { ref, watch, onMounted } from "vue";
import { getOrderStepRecord } from "@/request/order";
import { webSrc, timeFormat, enumUserType, getTimeDistance } from "@/common/mothed.js";

const props = defineProps({
  orderId: {
    type: [String, Number],
    default: "",
  },
});

const dataList = ref([]); // 操作记录列表
const typeList = ref([
  // 状态类型
  { label: "发起工单", value: 1 },
  { label: "审核通过", value: 2 },
  { label: "退回工单", value: 3 },
  { label: "重新发起", value: 4 },
  { label: "维修接单", value: 5 },
  { label: "维修结束", value: 6 },
  { label: "工单完结", value: 7 },
  { label: "复验不通过", value: 8 },
  { label: "撤销工单", value: 9 },
  { label: "任务发布", value: 10 },
  // { label: "业主退回", value: 11 },
  // { label: "转回机构处理", value: 12 },
  // { label: "待二次复验", value: 13 },
  // { label: "二次复验不通过", value: 14 },
]);

onMounted(() => {
  if (props.orderId) {
    getList();
  }
});

watch(
  props,
  (v) => {
    if (v.orderId) {
      setTimeout(() => {
        getList();
      }, 0);
    }
  },
  { immediate: true, deep: true }
);

// 获取操作记录列表
const getList = () => {
  getOrderStepRecord({ workOrderId: props.orderId }).then((res) => {
    if (res.code == 200) {
      let list = res.data;
      list = list.map((i, k) => {
        return {
          ...i,
          date: timeFormat(Number(new Date(i.createTime)), "mm-dd"),
          slot: "step" + (k + 1),
        };
      });
      dataList.value = list;
    }
  });
};

// 状态类型
const typeLabel = (info) => {
  let row = typeList.value.find((i) => i.value == info.type);
  return info.operationUserType != "05" && info.type == 5
    ? "指定人员接单"
    : row
    ? row.label
    : "";
};
</script>
<style lang="scss" scoped>
.step-remark {
  position: absolute;
  left: 50rpx;
  top: 60rpx;
  background: #fff;
  border-radius: 20rpx;
  border: 2rpx solid #dedede;
  box-sizing: border-box;
  width: 580rpx;

  .step-row {
    display: flex;
    justify-content: space-between;
    &-left {
      max-width: 410rpx;
      flex: 1;
      padding: 20rpx;
      .operator {
        font-size: 36rpx;
        color: #212121;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .post-tag {
        min-width: 220rpx;
        font-size: 24rpx;
        color: #757575;
        margin-left: 30rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .step {
        color: #4ea770;
        font-size: 24rpx;
        margin-top: 20rpx;
        display: inline-block;
        padding: 6rpx 20rpx;
        background: #e6f1e9;
        border-radius: 8rpx;
        border: 2rpx solid #abd49d;
      }
      .red {
        color: #eb736c;
        background: #fbeeee;
        border: 1px solid #e3a0a0;
      }
    }
  }
  .step-bottom {
    border-top: 2rpx solid #dedede;
    padding: 20rpx;
  }
}
</style>
